<template>
  <div>
    <el-card>
      <!-- 顶部 -->
      <el-row>
        <el-col>
          <el-button type="text" icon="el-icon-arrow-left" @click="back"
            >返回</el-button
          ><span style="margin-left: 20px">{{ this.product.goodsName }}</span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <!-- 顶部 -->

      <el-row>
        <el-col :span="8">
          <el-image
            style="width: 400px; height: 400px"
            :src="product.photoName"
            :preview-src-list="[product.photoName]"
          >
            <div slot="error" class="image-slot">
              <el-image
                style="width: 400px; height: 400px"
                :src="qzImg"
                :preview-src-list="[qzImg]"
              >
              </el-image>
            </div>
          </el-image>
        </el-col>
        <el-col :span="8">
          <div>
            <span>商品分类：</span><span>{{ product.goodsType }}</span>
          </div>
          <div style="margin-top: 40px">
            <span>备注：</span><span>{{ product.remark }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <span>商品库存：</span><span>{{ 0 }}台</span>
          </div>
          <div style="margin-top: 40px">
            <span>创建时间：</span><span>{{ product.createTime }}</span>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-table :data="goodsRecordList" border style="width: 100%">
          <el-table-column prop="tableNumber" label="单号" width="180">
          </el-table-column>
          <el-table-column label="设备" width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">
                  <div
                    v-for="item in scope.row.addGoods"
                    :key="item.id"
                    style="margin-top: 6px"
                  >
                    序列号：{{ item.serialNumber }}
                  </div>
                </div>
                <el-tag>{{ scope.row.addGoods.length }}台</el-tag>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="180">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteInventoryById(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页组件 -->
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[10, 20, 40, 100]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import productApi from "@/api/inventory/product";
import goodsRecordApi from "@/api/inventory/goodsRecord";
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      productId: null,

      product: {},

      qzImg: "http://154.8.182.144:9999/sys/common/download?name=quZhi.png",
      // qzImg: "http://www.quzhi.org.cn:9999/sys/common/download?name=quZhi.png",

      goodsRecordList: [],
      houverText: "",
    };
  },

  methods: {
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getGoodCords();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getGoodCords();
    },

    // 返回
    back() {
      this.$router.push({ path: "/inventorys" });
    },

    // 获取获取订单
    getProductById(id) {
      productApi.getproductById(id).then((response) => {
        this.product = response.data;
        this.getGoodCords();
      });
    },

    // 获取添加商品记录
    getGoodCords() {
      goodsRecordApi
        .getGoodsRecordList(this.searchModel, this.product.id)
        .then((response) => {
          this.goodsRecordList = response.data.rows;
          this.total = response.data.total;
        });
    },

    gethouverText(addGoods) {
      var text = "";
      addGoods.forEach((item) => {
        text += item.serialNumber + "\n";
      });
      return text;
    },

    deleteInventoryById(goodsRecord) {
      this.$confirm(
        `您确删除该条库存添加记录吗-?${goodsRecord.tableNumber}`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          goodsRecordApi
            .deleteGoodsRecordById(goodsRecord.id, getToken())
            .then((response) => {
              this.$message({
                type: "success",
                message: response.message,
              });
              this.getGoodCords();
            });
        })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.productId = this.$route.query.id;
    this.getProductById(this.productId);
  },
};
</script>

<style scoped></style>
